<template lang="pug">
.upload-section
  .upload-section-header
    .upload-section-title 选择分类
  .upload-section-content
    .content-header
      .content-header-label 您最近使用的材料分类：
      .content-header-bd
        el-select(size="small" :popper-append-to-body="false" placeholder="请选择" v-model="lastCate" @change="changeLastCate")
          el-option(v-for="item in lastList" :label="item.classificationName" :value="item.classificationId")
            span {{item.firstLevelClassName}}{{item.secondLevelClassName ? ' > ' : ''}}
            span {{item.secondLevelClassName}}{{item.thirdLevelClassName ? ' > ' : ''}}
            span {{item.thirdLevelClassName}}{{item.fourthLevelClassName ? ' > ' : ''}}
            span {{item.fourthLevelClassName}}
    .content-body
      .content-body-container
        .cate-section
          .cate-section-title 选择一级分类
          .cate-section-search
            el-input(size="small" placeholder="请输入关键字" v-model="category.stair_keyword" @input="search(0, 'stair', 'stair')")
          .cate-item(
              v-for="item in category.stair"
              :class="{ 'active': item.classificationId === category.stair_id }"
              @click="changeCategory(item, 'stair', 'second', 'stair_id')"
            )
            .cate-item-value {{item.classificationName}}
            .cate-item-ft(v-if="!item.isLeaf")
              .el-icon-arrow-right
        .cate-iconfont(v-if="category.second.length")
          .iconfont.icon-next-2
        .cate-section(v-if="category.second.length")
          .cate-section-title 选择二级分类
          .cate-section-search
            el-input(size="small" placeholder="请输入关键字" v-model="category.second_keyword" @input="search(category.stair_id, 'second', 'second')")
          .cate-item(
              v-for="item in category.second"
              :class="{ 'active': item.classificationId === category.second_id }"
              @click="changeCategory(item, 'second', 'three', 'second_id')"
            )
            .cate-item-value {{item.classificationName}}
            .cate-item-ft(v-if="!item.isLeaf")
              .el-icon-arrow-right
        .cate-iconfont(v-if="category.three.length")
          .iconfont.icon-next-2
        .cate-section(v-if="category.three.length")
          .cate-section-title 选择三级分类
          .cate-section-search
            el-input(size="small" placeholder="请输入关键字" v-model="category.three_keyword" @input="search(category.second_id, 'three', 'three')")
          .cate-item(
              v-for="item in category.three"
              :class="{ 'active': item.classificationId === category.three_id }"
              @click="changeCategory(item, 'three', 'four', 'three_id')"
            )
            .cate-item-value {{item.classificationName}}
            .cate-item-ft(v-if="!item.isLeaf")
              .el-icon-arrow-right
        .cate-iconfont(v-if="category.four.length")
          .iconfont.icon-next-2
        .cate-section(v-if="category.four.length")
          .cate-section-title 选择四级分类
          .cate-section-search
            el-input(size="small" placeholder="请输入关键字" v-model="category.four_keyword" @input="search(category.three_id, 'four', 'four')")
          .cate-item(
              v-for="item in category.four"
              :class="{ 'active': item.classificationId === category.four_id }"
              @click="changeCategory(item, 'four', 'five', 'four_id')"
            )
            .cate-item-value {{item.classificationName}}
            .cate-item-ft(v-if="!item.isLeaf")
              .el-icon-arrow-right
      .content-info(v-if="currentValue")
        .content-info-label 您当前选择的商品类别是：
        .content-info-value {{currentValue}}
      .content-footer
        el-button(type="primary" @click="next") 下一步，填写材料信息
</template>

<script>
import { getLastUseList, getListByParentId } from 'api'
import { mapState, mapActions } from 'vuex'
export default {
  name: 'categoryModule',
  data () {
    return {
      lastCate: '',
      lastList: [],
      category: {
        stair: [],
        stair_id: '',
        stair_name: '',
        stair_keyword: '',
        second: [],
        second_id: '',
        second_name: '',
        second_keyword: '',
        three: [],
        three_id: '',
        three_name: '',
        three_keyword: '',
        four: [],
        four_id: '',
        four_name: '',
        four_keyword: '',
      },
      form: {},
      currentValue: ''
    }
  },
  computed: {
    ...mapState({
      materialData: state => state.material.materialData
    })
  },
  methods: {
    ...mapActions([
      'changeMaterialData'
    ]),
    changeLastCate (id) {
      let item = this.lastList.find(item => item.classificationId === id)
      this.form.sampleCategory = id
      let value = ''
      if (item.firstLevelClassName) {
        value = item.firstLevelClassName
      }
      if (item.secondLevelClassName) {
        value = item.firstLevelClassName + ' > ' + item.secondLevelClassName
      }
      if (item.thirdLevelClassName) {
        value = item.firstLevelClassName + ' > ' + item.secondLevelClassName + ' > ' + item.thirdLevelClassName
      }
      if (item.fourthLevelClassName) {
        value = item.firstLevelClassName + ' > ' + item.secondLevelClassName + ' > ' + item.thirdLevelClassName + ' > ' + item.fourthLevelClassName
      }
      this.currentValue = value
    },
    async getLastUseList () {
      try {
        const { ResultSet } = await this.$axios.post(getLastUseList)
        this.lastList = ResultSet.userData.data
      } catch (err) {
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    search (parentId, value, child) {
      this.getCategories(parentId, value, child)
    },
    // 获取品类
    async getCategories (parentId = 0, value = 'stair', child = 'stair') {
      try {
        let query = { parentId: parentId }
        if (this.category[`${value}_keyword`]) query.keyword = this.category[`${value}_keyword`]
        const { ResultSet } = await this.$axios.post(getListByParentId, { ...query })
        this.category[child] = ResultSet.userData.data
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    changeCategory (item, value, child, currentKey) {
      this.category[currentKey] = item.classificationId
      switch (value) {
        case 'stair':
          this.category.stair_name = item.classificationName
          this.category.second_id = ''
          this.category.second_name = ''
          this.category.second = []
          this.category.three_id = ''
          this.category.three_name = ''
          this.category.three = []
          this.category.four_id = ''
          this.category.four_name = ''
          this.category.four = []
          this.form.descriptions = []
          this.form.fixParams = []
          this.currentValue = this.category.stair_name
          break;
        case 'second':
          this.category.second_name = item.classificationName
          this.category.three_id = ''
          this.category.three_name = ''
          this.category.three = []
          this.category.four_id = ''
          this.category.four_name = ''
          this.category.four = []
          this.currentValue = this.category.stair_name + ' > ' + this.category.second_name
          break;
        case 'three':
          this.category.three_name = item.classificationName
          this.category.four_id = ''
          this.category.four_name = ''
          this.category.four = []
          this.currentValue = this.category.stair_name + ' > ' + this.category.second_name + ' > ' + this.category.three_name
          break;
        case 'four':
          this.category.four_name = item.classificationName
          this.currentValue = this.category.stair_name + ' > ' + this.category.second_name + ' > ' + this.category.three_name + ' > ' + this.category.four_name
      }
      this.setCategory(item.classificationId, value, child)
      this.getCategories(item.classificationId, value, child, currentKey)
    },
    setCategory (id, value, child) {
      this.category[value].forEach(item => {
        if (item.classificationId === id) {
          if (item.isLeaf) {
            this.form.sampleCategory = item.classificationId
          } else {
            this.form.sampleCategory = ''
          }
        }
      })
    },
    next () {
      if (this.form.sampleCategory) {
        this.changeMaterialData({ form: { ...this.form }, currentValue: this.currentValue, category: this.category, lastCate: this.lastCate })
        this.$emit('next')
      } else {
        this.$message.error('请先选择分类')
      }
    },
    setCurrentValue (key) {
      let item = this.category[key].find(item => item.classificationId === this.category[`${key}_id`])
      if (item) this.category[`${key}_name`] = item.classificationName
    },
    setinfoValue () {
      if (this.category.stair_name) {
        this.currentValue = this.category.stair_name
      }
      if (this.category.stair_name) {
        this.currentValue = this.category.stair_name + ' > ' + this.category.second_name
      }
      if (this.category.three_name) {
        this.currentValue = this.category.stair_name + ' > ' + this.category.second_name + ' > ' + this.category.three_name
      }
      if (this.category.four_name) {
        this.currentValue = this.currentValue = this.category.stair_name + ' > ' + this.category.second_name + ' > ' + this.category.three_name + ' > ' + this.category.four_name
      }
    },
  },
  async created () {
    await this.getCategories()
    await this.getLastUseList()
    this.form = { ...this.form, ...this.materialData.form }
    this.lastCate = this.materialData.lastCate
    this.currentValue = this.materialData.currentValue
    if (this.$route.params.id) {
      if (this.form.sampleCategoryList && this.form.sampleCategoryList.length) {
        if (this.form.sampleCategoryList.length === 4) {
          this.category.stair_id = this.form.sampleCategoryList[this.form.sampleCategoryList.length - 4]
          this.setCurrentValue('stair')
          this.category.second_id = this.form.sampleCategoryList[this.form.sampleCategoryList.length - 3]
          await this.getCategories(this.category.stair_id, 'second', 'second')
          this.setCurrentValue('second')
          this.category.three_id = this.form.sampleCategoryList[this.form.sampleCategoryList.length - 2]
          await this.getCategories(this.category.second_id, 'three', 'three')
          this.setCurrentValue('three')
          this.category.four_id = this.form.sampleCategoryList[this.form.sampleCategoryList.length - 1]
          this.getCategories(this.category.three_id, 'four', 'four')
          this.setCurrentValue('four')
        } else if (this.form.sampleCategoryList.length === 3) {
          this.category.stair_id = this.form.sampleCategoryList[this.form.sampleCategoryList.length - 3]
          this.setCurrentValue('stair')
          await this.getCategories(this.category.stair_id, 'second', 'second')
          this.category.second_id = this.form.sampleCategoryList[this.form.sampleCategoryList.length - 2]
          await this.getCategories(this.category.second_id, 'three', 'three')
          this.setCurrentValue('second')
          this.category.three_id = this.form.sampleCategoryList[this.form.sampleCategoryList.length - 1]
          await this.getCategories(this.category.three_id, 'four', 'four')
          this.setCurrentValue('three')
        } else if (this.form.sampleCategoryList.length === 2) {
          this.category.stair_id = this.form.sampleCategoryList[this.form.sampleCategoryList.length - 2]
          this.setCurrentValue('stair')
          await this.getCategories(this.category.stair_id, 'second', 'second')
          this.category.second_id = this.form.sampleCategoryList[this.form.sampleCategoryList.length - 1]
          this.setCurrentValue('second')
          this.getCategories(this.category.second_id, 'three', 'three')
        } else if (this.form.sampleCategoryList.length === 1) {
          this.category.stair_id = this.form.sampleCategoryList[this.form.sampleCategoryList.length - 1]
          this.setCurrentValue('stair')
          this.getCategories(this.category.stair_id, 'second', 'second')
        }
        this.setinfoValue()
      }
    }
  },
}
</script>
  
<style lang="scss" scoped>
.upload-body {
  padding: 0 32px 16px;
}
.upload-section {
  width: 100%;
  margin-top: 20px;
  background: #fff;
  padding: 25px 0;
  border-radius: 4px;
  display: flex;
}
.upload-section-header {
  width: 250px;
  padding: 0 22px;
  .upload-section-title {
    padding: 10px 16.5px;
    border-radius: 0 50px 50px 0;
    background: #FF708B;
    font-size: 18px;
    line-height: 26px;
    color: #fff;
  }
}
.content-header {
  display: flex;
  align-items: center;
}
.upload-section-content {
  flex: 1;
  padding: 0 22px;
}
.content-body {
  margin-top: 20px;
}
.content-body-container {
  display: flex;
  align-items: flex-start;
}
.cate-section {
  width: 200px;
  border: 1px solid #EBEEF5;
}
.cate-section-title {
  background: #f5f7fa;
  height: 45px;
  line-height: 45px;
  padding: 0 15px;
  border-bottom: 1px solid #ebeef5;
  color: #363636;
  font-size: 16px;
}
.cate-item {
  height: 40px;
  line-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  color: #606266;
  font-size: 14px;
  border-bottom: 1px solid #ebeef5;
  cursor: pointer;
  &:last-child {
    border-bottom: none;
  }
  &:hover {
    background: #f5f5f5;
  }
  &.active {
    color: #FF2E42;
  }
}
.cate-item-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cate-section-search {
  height: 40px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ebeef5;
}
.cate-iconfont {
  margin: 0 15px;
  padding: 50px 0;
  .iconfont {
    font-size: 40px;
  }
}
.content-info {
  display: flex;
  align-items: center;
  margin-top: 20px;
}
.content-footer {
  margin-top: 20px;
  padding: 20px 0;
  text-align: center;
  border-top: 1px solid #ebeef5;
}
.content-info-value {
  color: #FF2E42;
}
</style>